<template>
  <view class="chart-box-one">
    <view class="header-wrap">
      <view class="title-wrap">
        <text class="title">价格销量指数分析</text>
        <text class="filter" @click="isOpenFilterBox=true">筛选</text>
      </view>

      <view class="time-change-box">
        <view class="tag-content">
          <uni-tag class="tag-box padd1" v-for="item in rangeOne" :key="item.value" :text="item.text" :type="item.type"
            @click="clickTag(item.value)" />
        </view>
        <uni-datetime-picker v-if="tagType1" v-model="datetimerange1" type="daterange" rangeSeparator="-"
          @change="timeChange($event)" />
        <view v-else class="uni-input" @tap="choseMothTypeDate(1)">
          <view>{{monthRange[0] || '开始日期'}}</view>
          <view class="icon">-</view>
          <view>{{monthRange[1] || '结束日期'}}</view>
        </view>
        <img :src="switchScreenImg" @click="fullScreenFn()" style="width:20px;height:20px;margin: 6px 0 0 6px" />
        <w-picker :visible.sync="rangeVisible" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
          :value="rangeVal" :current="true" @confirm="onConfirm($event, 1)" @cancel="rangeVisible = false"
          ref="range"></w-picker>
      </view>
    </view>
    <!-- 价格指数 -->
    <view class="charts-box">
      <view v-show="chartDataPriceNo" class="no-data-box">
        <img :src="noDataImg" />
        <view>暂无数据</view>
      </view>
      <echarts-uniapp v-show="!chartDataPriceNo" canvasId="FGFGFS4-HP" :pageProgress="pricePage" :pageSize="8"
        :option="priceIndexOption"></echarts-uniapp>
    </view>
    <!-- 销量指数 -->
    <view class="charts-box">
      <view v-show="chartDataSalesNo" class="no-data-box">
        <img :src="noDataImg" />
        <view>暂无数据</view>
      </view>
      <echarts-uniapp v-show="!chartDataSalesNo" canvasId="FGFGFS3-HP" :pageProgress="salesPage" :pageSize="8"
        :option="salesIndexOption"></echarts-uniapp>
    </view>
    <index-filter :show="isOpenFilterBox" @openChange="openChange" @filterChange="filterBoxChange"></index-filter>
    <loading v-show="showLoading1"></loading>
  </view>
</template>
<script>
  import config from '@/config';
  import { getSalesList, getPriceList } from '@/api/analysis.js';
  import indexFilter from '@/pages/common/index-filter/index-filter';

  export default {
    components: {
      indexFilter
    },
    computed: {
      switchScreenImg() {
        return config.baseImgUrl + '/switch-screen.png';
      }
    },
    data() {
      return {
        isOpenFilterBox: false,
        chartDataPriceNo: false,
        chartDataSalesNo: false,
        rangeVisible: false,
        showLoading1: false,
        tagType1: true,
        timeType: 'day',
        rangeVal: [],
        monthRange: [],
        datetimerange1: [],
        searchParam: {
          collieryId: [],
          coalId: [],
          hotVal: undefined,
          ids: []
        },
        rangeOne: [
          { value: 'hour', text: '时', type: 'default' },
          { value: 'day', text: '日', type: 'primary' },
          { value: 'month', text: '月', type: 'default' }
        ],
        priceIndexOption: {
          color: ['#47D9B6', '#409EFE', '#F78600', '#FF4D4F', '#8B6FFE'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '35%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            min: 0,
            type: 'value',
            name: '单位：元',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        salesIndexOption: {
          color: ['#47D9B6', '#409EFE', '#F78600', '#FF4D4F', '#8B6FFE'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '35%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            min: 0,
            type: 'value',
            name: '单位：万吨',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        pricePage: 0,
        salesPage: 0,
      }
    },
    onReady() {
      const now = new Date()
      const date = new Date(new Date() - 1000 * 60 * 60 * 24 * 7);
      const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
      this.rangeVal = [currentDate, currentDate]
      const endDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.datetimerange1 = [endDate, currentDate];
      this.getFoldLineData();
    },
    methods: {
      fullScreenFn() {
        this.$tab.switchTab('/pages/work/index');
      },
      openChange(data) {
        this[data.key] = data.show;
      },
      clickTag(type) {
        if (type === 'month') {
          this.tagType1 = false;
        } else {
          this.tagType1 = true;
        }
        this.timeType = type;
        this.monthRange = []
        this.datetimerange1 = [];
        this.getFoldLineData();
        this.rangeOne = this.handleRange(this.rangeOne, type)
      },
      handleRange(list, type) {
        return list.map(item => {
          if (item.value === type) {
            item.type = 'primary';
          } else {
            item.type = 'default';
          }
          return item
        });
      },
      filterBoxChange(data) {
        this.searchParam = data
        this.getFoldLineData();
      },
      async getFoldLineData() {
        this.getPriceList()
        this.getSalesList()
      },
      getParams() {
        const data = {
          timeDimension: this.timeType,
          hasCondition: false,
          coalBasicIds: this.searchParam.ids,
        }
        if (this.tagType1) {
          if (this.datetimerange1.length) {
            data['startTime'] = `${this.getFullDate(this.datetimerange1[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.datetimerange1[1])} 00:00:00`
          }
        } else {
          if (this.monthRange.length) {
            data['startTime'] = `${this.monthRange[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange[1]}-01 00:00:00`
          }
        }
        return data
      },
      getFullDate(date) {
        const dateList = date.split('-')
        return `${dateList[0]}-${this.getFullString(dateList[1])}-${this.getFullString(dateList[2])}`
      },
      getFullString(value) {
        if (value.length === 1) {
          return `0${value}`
        }
        if (value.length === 2) {
          return value
        }
        return value
      },
      choseMothTypeDate(type) {
        this.rangeVisible = true;
      },
      onConfirm(res, type) {
        const startMonth = `${res.obj.fyear}-${this.getFullString(res.obj.fmonth)}`
        const endMonth = `${res.obj.tyear}-${this.getFullString(res.obj.tmonth)}`
        this.monthRange = [startMonth, endMonth]
        this.rangeVal = res.value
        this.getFoldLineData();
      },
      async getPriceList() {
        const data = this.getParams()
        if (this.searchParam.hotVal) {
          data['calorificValue'] = this.searchParam.hotVal
        }
        this.showLoading1 = true
        const res = await getPriceList(data);
        if (res.code === 0) {
          const result = res?.data?.classifyList || []
          if (result.length > 0) {
            this.chartDataPriceNo = false;
            const priceIndexVoList = result[0].priceIndexVoList || []
            const xAxisList = priceIndexVoList.map(e => e.time) || []
            this.pricePage = Number((100 / xAxisList.length).toFixed(2))
            this.priceIndexOption.legend.data = result.map(e => e.classifyName) || []
            this.priceIndexOption.xAxis.data = xAxisList
            this.priceIndexOption.series = result.map(e => {
              const priceList = e.priceIndexVoList || []
              return {
                type: 'line',
                name: e.classifyName,
                data: priceList.map(e => e.obversionPrice)
              }
            })
            let start = 0;
            if (xAxisList.length > 8) {
              start = 100 - this.pricePage * 7;
            }
            this.priceIndexOption.dataZoom = [{
              show: true,
              height: 0,
              bottom: 0,
              start: start,
              end: 100
            }]
          } else {
            this.chartDataPriceNo = true;
          }
        }
        this.showLoading1 = false
      },
      async getSalesList() {
        const data = this.getParams()
        this.showLoading1 = true
        const res = await getSalesList(data);
        if (res.code === 0) {
          const result = res.data.classifyList || []
          if (result.length > 0) {
            this.chartDataSalesNo = false;
            const salesIndexVoList = result[0].salesIndexVoList || []
            const xAxisList = salesIndexVoList.map(e => e.time) || []
            this.salesPage = Number((100 / xAxisList.length).toFixed(2))
            this.salesIndexOption.legend.data = result.map(e => e.classifyName) || []
            this.salesIndexOption.xAxis.data = xAxisList
            this.salesIndexOption.series = result.map(e => {
              const salesList = e.salesIndexVoList || []
              return {
                type: 'line',
                name: e.classifyName,
                data: salesList.map(e => e.salesVolume)
              }
            })
            let start = 0;
            if (xAxisList.length > 8) {
              start = 100 - this.salesPage * 7;
            }
            this.salesIndexOption.dataZoom = [{
              show: true,
              height: 0,
              bottom: 0,
              start: start,
              end: 100
            }]
          } else {
            this.chartDataSalesNo = true;
          }
        }
        this.showLoading1 = false
      },
      timeChange(timeRange) {
        this.datetimerange1 = timeRange
        this.getFoldLineData()
      },
    }
  }

</script>
<style lang="scss" scoped>
  .chart-box-one {
    position: relative;
    background: #fff;
    padding: 10px;
    margin: 10px;
    width: 96%;
    overflow: hidden;
    border-radius: 8px;

    .header-wrap {
      .title-wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        text.title {
          font-size: 15px;
          font-weight: 600;
        }

        text.filter {
          color: #409EFE;
        }
      }
    }

    .tag-content {
      margin-right: 10px;

      .tag-box+.tag-box {
        margin-left: 6px;
      }
    }


  }

  .time-pick {
    border: 1px solid #e5e5e5;
    padding: 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
  }

  .example-box {
    display: flex;
  }

  .charts-content {
    background: #fff;
  }

  .search-box {
    padding: 0 8px;
  }

  .time-change-box {
    width: 100%;
    padding: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;

    .til {
      width: 80rpx;
      float: left;
      margin-top: 9px;
      position: relative;
    }

    .uni-input {
      width: 400rpx;
      height: 32px;
      line-height: 1;
      font-size: 14px;
      border-radius: 5px;
      padding: 0px 11px 0 11px;
      word-spacing: 15px;
      line-height: 32px;
      border-radius: 5px;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-around;
    }

    .range-date {
      width: 187px;
      height: 32px;
      display: inline-block;
      border: 1px solid #eee;
      float: left;
      margin-right: 6px;
    }

    button {
      position: absolute;
      right: 6px;
      top: -6px;
    }
  }

  .charts-box {
    width: 100%;
    height: 220px;
    text-align: center;

    .no-data-box {
      padding-top: 20px;
      text-align: center;

      >view {
        margin-top: 10px;
      }
    }

    image {
      height: 150px;
      width: 226px;
    }

    .chart-title:before {
      content: '';
      display: block;
      top: 1px;
      border-radius: 10px;
      background-color: #0ea8e4;
      width: 5px;
      height: 20px;
      position: absolute;
      top: 10px;
      left: -12px;
    }

    .chart-title {
      font-size: 20px;
      color: #1f2f3d;
      margin-left: 20px;
      line-height: 40px;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
    }
  }
</style>
<style lang="scss">
  ::v-deep.chart-box-one .tag-box .uni-tag {
    padding: 6px 8px !important
  }
</style>